<template>
	<el-dialog title="客户列表" center v-model="dialogTableVisible1" append-to-body @close="close">
		<div class="flex col-center row-end pb10">
			<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
				<el-form-item label="关键字" prop="keyword" style="margin-bottom: 0;">
					<el-input v-model="queryParams.keyWords" placeholder="请输入" clearable class="resetInput"
						style="width: 200px" :suffix-icon="Search" />
				</el-form-item>
				<el-button class="mt5" type="defaultBtn" @click="handleQuery">搜索</el-button>
				<el-button class="mt5" @click="resetQuery">重置</el-button>
			</el-form>
		</div>
		<el-table v-loading="loading" :data="list" style="width: 100%;"
			:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}" :cell-style="{height:'54px'}"
			highlight-current-row
			@current-change="handleSelectionChange1"
			ref="singleTable"
			>
			<el-table-column label="选择客户" align="center">
				<template #default="scope">
					<el-radio v-model="customerMes.id" :label="scope.row.id">{{''}}</el-radio> 
				</template>
			</el-table-column>
			<el-table-column label="客户姓名" align="center">
				<template #default="scope">
					<span class="main-color">{{scope.row.customerName}}</span>
				</template>
			</el-table-column>
			<el-table-column label="客户状态" align="center">
				<template v-slot="scope">
					<dict-tag :options="bus_customer_status" :value="scope.row.customerStatus" />
				</template>
			</el-table-column>
			<el-table-column label="客户星级" align="center" prop="userName">
				<template #default="scope">
					<el-rate v-model="scope.row.customerStarLevel" disabled text-color="#ff9900" />
				</template>
			</el-table-column>
			<el-table-column label="创建人" align="center" prop="createByName" :show-overflow-tooltip="true" />
			<el-table-column label="业务经理" align="center" prop="businessManagerName" :show-overflow-tooltip="true" />
			<el-table-column label="手机号码" align="center" prop="phoneNumber" :show-overflow-tooltip="true" />
			<!-- <el-table-column label="最后跟进" align="center" prop="latestFollowupTime" :show-overflow-tooltip="true" />
			<el-table-column label="未跟进天数" align="center" prop="notFollowingDay" :show-overflow-tooltip="true" /> -->
		</el-table>
		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize" @pagination="getList" />
		<div slot="footer" class="dialog-footer text-right mt30">
			<el-button class="cancelSubBtn" @click="close()">取 消</el-button>
			<el-button type="primary" @click.stop="chooseCustomer()" class="mainSubBtn">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		customerList, //客户列表
	} from "@/api/business/customer";
	export default {
		data() {
			return {
				loading: true, // 遮罩层
				list: [],
				dialogTableVisible1: false,
				multiple: true, // 非多个禁用
				total: 0, // 总条数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyWords:''
				}, //查询参数
				id:'',
				bus_customer_status:this.useDict('bus_customer_status').bus_customer_status,
				customerMes:{
					id:'',
					name:''
				}
			}
		},
		created() {
			// this.getList()
		},
		methods: {
			open() {
				this.dialogTableVisible1 = true
				this.getList()
			},
			close() {
				this.dialogTableVisible1 = false
			},
			handleQuery(){
				this.getList()
			},
			// 重置按钮操作
			resetQuery() {
				this.queryParams.keyWords = ''
				this.handleQuery();
			},
			//查询产品列表
			getList() {
				this.loading = true;
				customerList(this.queryParams).then((response) => {
					this.list = response.rows
					this.total = response.total;
					this.loading = false;
				});
			},
			// 单选框选中数据
			handleSelectionChange1(val) {
				console.log(val,'val')
				if(val){
					this.customerMes = {
						id:val.id,
						name:val.customerName,
						businessManagerId: val.businessManagerId,
						businessManagerName:val.businessManagerName,
						opportunitySource:val.opportunitySource,
						phoneNumber:val.phoneNumber,
						shippingAddress:val.detailedAddress,
						localArea: val.localArea,
						localAreaName: val.localAreaName,
						localCity: val.localCity,
						localCityName: val.localCityName,
						localCounty:val.localCounty,
						localCountyName: val.localCountyName,
						localProvince:val.localProvince,
						localProvinceName: val.localProvinceName
					}
				}
			},
			chooseCustomer() {
				if(this.customerMes.id == ''){
					this.$modal.msgError('请先选择客户')
					return false
				}
				this.dialogTableVisible1 = false
				this.$emit('customerFunc', this.customerMes)
			}
		}
	}
</script>

<style>
</style>